<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      :title="title"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">房屋地址</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">出租人</div>
              <div class="value common-value">{{ historyInfo.hostName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">承租人</div>
              <div class="value common-value">{{ historyInfo.name ? historyInfo.name.join('、') : '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">租房时间</div>
              <div class="value common-value">
                {{ historyInfo.beginTime ? moment(historyInfo.beginTime).format('YYYY/MM/DD') : '暂无' }}
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">房屋租期</div>
              <div class="value common-value">
                {{ historyInfo.leaseTerm ? `${historyInfo.leaseTerm}个月` : '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">房租金额</div>
              <div class="value common-value">
                {{ historyInfo.rentalRent ? `${historyInfo.rentalRent}元/月` : '暂无' }}
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">租房用途</div>
              <div class="value common-value">
                {{ historyInfo.rentUse || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">租房合同</div>
              <div class="value common-value" v-if="historyInfo.rentContractType == 0">无租房合同</div>
              <div
                class="value common-value deatil-color"
                v-else-if="historyInfo.rentContractType == 1"
                @click="handleContractImage(historyInfo.rentContractImage.split(','))"
              >
                查看合同照片
              </div>
              <div
                class="value common-value deatil-color"
                v-else-if="historyInfo.rentContractType == 2"
                @click="handleContract"
              >
                查看电子合同
              </div>
            </div>
            <div class="info-wrap f1" v-if="type === 'history'">
              <div class="label common-lable">退租时间</div>
              <div class="value common-value">
                {{ moment(historyInfo.updateTime).format('YYYY/MM/DD') || '暂无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { getDictItemsFromCache, rentingHouseDetails, webpopulationDetails } from '../../../../api/api'
import moment from 'moment'
import { getPrefixImg, previewImage } from '../../../../utils/util'

export default {
  name: 'actuallyDetail',
  components: { publicModal, startEndTime },
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      publicVisible: false,
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,
      historyInfo: {},
      prefixImg: '',
    }
  },
  inject: ['selectedOrg'],
  mounted() {
    this.prefixImg = getPrefixImg()
  },
  computed: {
    title() {
      return this.type == 'history' ? '历史租房信息详情页' : '租房信息详情页'
    },
  },
  methods: {
    moment,
    async show(records) {
      console.log(records)
      this.historyInfo = {
        ...records,
      }
      this.publicVisible = true
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel(target) {
      this.publicVisible = false
    },
    handleContractImage(urls) {
      previewImage.call(this, urls)
    },
    handleContract() {
      const { href } = this.$router.resolve({
        path: '/rentingHouse/contract',
        query: {
          contractId: this.historyInfo.id,
          policeAgencyName: this.selectedOrg.policeAgencyName,
        },
      })
      window.open(href)
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
</style>
